<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点</title>
</head>
<style>
    .bold{
        font-size: 30px;
        color: #333333;
    }
</style>
<body>
<div id="content">
    <h1 id="title">hello</h1>
    <div class="box">
        <h2 class="example">大家好</h2>
        <p class="example">我来自赛博坦星球</p>
        <span>变形金刚的故乡</span>
    </div>
    <h1 id="title2">我要放在hello前边</h1>
</div>
</body>
<script>
    // 一、创建节点
        // 1、创建元素节点  document.createElement(元素标签)
        // 创建一个有内容的 span 节点到 id 为 title 的节点后：
        let content = document.getElementById('content') // 获取父节点
        let targetSpan = document.createElement('span') // 创建新节点

        // 2、创建属性节点 document.createAttribute(元素属性)
        let att = document.createAttribute("class");
        att.value="bold";
        document.getElementsByTagName("span")[0].setAttributeNode(att);
        // 3、创建文本节点
        let text = document.createTextNode("我18岁了");
        content.appendChild(text);

    // 二、获取节点
    // 1、document.getElementById(元素id)
    // 2、document.getElementsByClassName(类名)
    // 3、document.getElementsByTagName(元素标签)
    let spanList = document.getElementsByTagName("span")
    console.log(spanList)
    // 4、document.querySelectorAll(类名)
    let exampleList = document.querySelectorAll('.example')
    console.log(exampleList)

    // 三、插入节点
    //  1、appendChild(要添加的新节点)
    targetSpan.innerHTML = '我是吴彦祖' // 设置 span 节点的内容
    content.appendChild(targetSpan)  // 向父节点的节点列表的末尾添加新节点
     // 2、insertBefore(要添加的新节点,已知的子节点)
    let title = document.getElementById('title')
    let title2 = document.getElementById('title2')
    content.insertBefore(title2,title)  // 交换两个元素，将 title2 放在 title 前面

    // 四、删除节点
    // 删除 id 为title的元素
    // let title = document.getElementById('title')  // 获取 id 为title的元素
    content.removeChild(title) // 删除
    // 还可以通过子节点数组来完成删除：
    let targetNode = content.childNodes // 获取子节点
    content.removeChild(targetNode[1])  // 删除目标元素

    // 五、替换节点
    // replaceChild(要插入的新元素，被替换的旧元素)
    let textNode=document.createTextNode("我是替换hello的");
    content.replaceChild(textNode,targetNode[1])
    // 六、复制节点
    // cloneNode(true/false)
    let cloneNode = title2.cloneNode(true);
    let box = document.getElementsByClassName("box")
    box[0].appendChild(cloneNode);
</script>
</html>
